#include('../header.html', {title: '我的课程'})

<div id="content-container" class="container">
  <div class="row row-3-9 my-layout">
    <div class="col-md-3">
      #include('sideMenu.html', {user: '', name: '我的课程'})
    </div>
    <div id="collect" class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">
          我的课程
        </div>
        <div class="panel-body">
          <!--课程导航-->
          <ul ref="ulTabs" class="cd-tabs">
            <li @click="getCourses(0)" class="active"><a href="javascript:">学习中</a></li>
            <li @click="getCourses(1)"><a href="javascript:">已学完</a></li>
            <li @click="getCourses(2)"><a href="javascript:">收藏</a></li>
          </ul>
          <!--课程列表-->
          <div v-if="courses.length<=0" class="cd-empty">暂无课程数据</div>
          <course v-for="c in courses" :key="c.id" :info="c" :type="type"></course>
        </div>
      </div>
    </div>
  </div>
</div>

<template id="course">
  <div class="my-course-item cd-mb40 clearfix">
    <a class="my-course-item__link" :href="'/course/'+info.course.id+'/info'">
      <img class="my-course-item__picture" :src="info.course.cover">
    </a>
    <div class="my-course-item__info"> <!--进度信息-->
      <div class="my-course-item__title text-overflow" style="font-size: 25px">
        <a class="color-gray" :href="'/course/'+info.course.id+'/info'">{{info.course.name}}</a>
      </div>
      <div v-if="type!=2" class="my-course-item__progress cd-mt24">
        <span>学习进度</span>
        <div class="cd-progress cd-progress-xs">
          <div class="progress-bar cd-progress-bar progress-bar-success"
               :style="'width:'+info.rate+'%'"></div>
        </div>
        <span>{{info.rate}}%</span>
      </div>
    </div>
    <div class="my-course-item__btn">
      <a v-if="type==2" class="btn cd-btn cd-btn-primary cd-btn-lg" :href="'/course/'+info.course.id+'/info'"
         target="_blank">查看课程</a>
      <a v-if="type!=2" class="btn cd-btn cd-btn-primary cd-btn-lg"
         :href="'/course/'+info.course.id+'/join/info'">继续学习</a>
    </div>
  </div>
</template>
<script type="text/javascript">
  var types = ['/course/learn/api/page', '/course/learn/api/page', '/course/page'];
  var coursevm = new Vue({
    el: '#collect',
    data: {
      courses: [],
      page: {
        pageNum: 1,
        totalPages: 1
      },
      type: -1
    },
    methods: {
      getCourses: function (index) {
        var self = this;
        self.type = index;
        $(this.$refs.ulTabs).find('li.active').removeClass("active");
        $(this.$refs.ulTabs).find('li').eq(index).addClass("active");
        var uri = types[index];
        var over = (index !== 0);
        $.post(uri, {over: over}, function (data) {
          self.courses = []; //清除原div内容
          if (data.success) {
            self.courses = data.payload.rows; //渲染出整个收藏数组的内容
          }
        })
      }
    },
    components: {
      course: {
        props: ['info', 'type'],
        template: '#course'
      }
    },
    created: function () {
      this.getCourses(0);
    }
  });
</script>
#include('../footer.html')